<template>
  <div>
    <div class="title">
      <van-row>
        <van-col span="20">
          <div class="left">
            <h2>Hi</h2>
            <h2>欢迎回来。</h2>
          </div>
        </van-col>
        <van-col span="4">
          <van-icon name="chat" size="26" class="icons" />
        </van-col>
      </van-row>
    </div>
    <div class="form">
      <van-tabs color="#333" v-model="active" animated>
        <van-tab :title="'快捷登录'">
          <van-field
            class="inp"
            v-model="tel"
            type="tel"
            placeholder="请输入手机号"
          /><br />

          <van-field
            class="inp"
            v-model="sms"
            center
            clearable
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" class="sms"
                >发送验证码</van-button
              >
            </template> </van-field
          ><br />

          <van-button type="default" class="btn" @click="login"
            >登录</van-button
          >
          <van-row type="flex" justify="space-around">
            <van-col span="6">切换账号</van-col>
            <van-col span="6">新用户注册</van-col>
          </van-row>
          <van-row type="flex" justify="space-around">
            <van-col span="8" style="margin-top: 10vh">其他账号登录</van-col>
          </van-row>
          <van-row type="flex" justify="center" style="margin-top: 5vh">
            <van-col span="6">
              <img src="/images/QQ.png" style="width: 50%" alt="" />
            </van-col>
            <van-col span="6">
              <img src="/images/微信.png" style="width: 50%" alt="" />
            </van-col>
            <van-col span="6">
              <img src="/images/微博.png" style="width: 50%" alt="" />
            </van-col>
          </van-row>
        </van-tab>
        <van-tab :title="'账号登录'">
          <van-field
            class="inp"
            v-model="tel"
            type="tel"
            placeholder="请输入账号"
          /><br />
          <van-field
            class="inp"
            v-model="password"
            type="password"
            placeholder="请设置密码（含大小写、数字）"
          />
          <br />
          <van-button type="default" class="btn">登录</van-button>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      password: "",
      sms: "",
      active: "",
    };
  },
  methods: {
    login() {
      this.$store.dispatch("apple/Login", this.tel).then((e) => {
        console.log(e.data.data);
        localStorage.setItem("user", JSON.stringify(e.data.data));
        location.reload();
      });
    },
  },
};
</script>

<style scoped="scoped">
.title {
  width: 100vw;
  height: 20vh;
  /* margin-top: 2vh; */
  /* background-color: cornflowerblue; */
}
.van-tab--active {
  font-weight: bold !important;
}
.left {
  text-align: left;
  margin-left: 13vw;
}
.icons {
  margin-top: 2vh;
}
.form {
  margin-top: 4vh;
}
.btn {
  width: 80%;
  height: 5vh;
  color: white;
  margin-top: 5vh;
  background-color: #111;
  border-radius: 3px;
}
.sms {
  background-color: white;
  border: 1px #111 solid;
  color: black;
  border-radius: 3px;
}
.inp {
  width: 80%;
  margin-left: 10%;
  padding-top: 3vh;
  border-bottom: 1px #ccc solid;
}
</style>